Visaptverošs ceļvedis izstrādātājiem par CSS View Transition API izmantošanu, lai izveidotu vienmērīgu, lietotnei līdzīgu lapu navigāciju gan SPA, gan MPA. Apgūstiet pamatjēdzienus un papildu paņēmienus.
CSS View Transition API: Izcilākais ceļvedis vienmērīgas lapu navigācijas ieviešanai
Gadu desmitiem tīmekļa navigāciju ir definējusi nepatīkama realitāte: tukšs balts ekrāns. Noklikšķināšana uz saites nozīmēja pilnīgu lapas pārlādi, īsu tukšuma zibsni un tad pēkšņu jauna satura parādīšanos. Lai gan funkcionāla, šai pieredzei trūkst plūduma un gluduma, ko lietotāji ir sākuši sagaidīt no vietējām lietojumprogrammām. Vienas lapas lietojumprogrammas (SPA) parādījās kā risinājums, izmantojot sarežģītus JavaScript ietvarus, lai izveidotu vienmērīgas pārejas, bet bieži vien uz arhitektūras vienkāršības un sākotnējās ielādes veiktspējas rēķina.
Ko darīt, ja mums varētu būt labākais no abām pasaulēm? Vienkārša, serverī renderēta daudzu lapu lietojumprogrammas (MPA) arhitektūra apvienojumā ar elegantām, jēgpilnām SPA pārejām. Tas ir CSS View Transition API solījums – revolucionārs pārlūkprogrammas līdzeklis, kas gatavojas mainīt mūsu domāšanu par lietotāju pieredzes veidošanu tīmeklī.
Šis visaptverošais ceļvedis aizvedīs jūs dziļi View Transition API pasaulē. Mēs izpētīsim, kas tas ir, kāpēc tas ir monumentāls pavērsiens tīmekļa izstrādē un kā jūs varat to ieviest jau šodien – gan SPA, gan, vēl aizraujošāk, tradicionālām MPA. Sagatavojieties atvadīties no baltā zibšņa un sveicināt jaunu vienmērīgas tīmekļa navigācijas ēru.
Kas ir CSS View Transition API?
CSS View Transition API ir mehānisms, kas ir iebūvēts tieši tīmekļa platformā un kas ļauj izstrādātājiem izveidot animētas pārejas starp dažādiem DOM (Document Object Model) stāvokļiem. Būtībā tas nodrošina vienkāršu veidu, kā pārvaldīt vizuālās izmaiņas no viena skata uz citu, neatkarīgi no tā, vai šīs izmaiņas notiek vienā lapā (SPA) vai starp diviem dažādiem dokumentiem (MPA).
Process ir ievērojami gudrs. Kad tiek aktivizēta pāreja, pārlūkprogramma:
- Uzņem pašreizējās lapas stāvokļa "ekrānuzņēmumu" (vecais skats).
- Ļauj jums atjaunināt DOM uz jauno stāvokli.
- Uzņem jaunās lapas stāvokļa "ekrānuzņēmumu" (jaunais skats).
- Novieto vecā skata ekrānuzņēmumu virs jaunā, tiešā skata.
- Animē pāreju starp abiem, parasti ar vienmērīgu savstarpēju izbalēšanu pēc noklusējuma.
Visu šo procesu orķestrē pārlūkprogramma, padarot to ļoti efektīvu. Vēl svarīgāk, tas dod izstrādātājiem pilnīgu kontroli pār animāciju, izmantojot standarta CSS, pārvēršot to, kas reiz bija sarežģīts JavaScript uzdevums, par deklaratīvu un pieejamu stila izaicinājumu.
Kāpēc tas maina spēles noteikumus tīmekļa izstrādē
Šī API ieviešana nav tikai vēl viens pakāpenisks atjauninājums; tas ir būtisks tīmekļa platformas uzlabojums. Lūk, kāpēc tas ir tik nozīmīgi izstrādātājiem un lietotājiem visā pasaulē:
- Dramatiski uzlabota lietotāja pieredze (UX): Vienmērīgas pārejas nav tikai kosmētiskas. Tās nodrošina vizuālu nepārtrauktību, palīdzot lietotājiem saprast saistību starp dažādiem skatiem. Elements, kas vienmērīgi izaug no sīktēla līdz pilna izmēra attēlam, nodrošina kontekstu un virza lietotāja uzmanību, padarot saskarni intuitīvāku un atsaucīgāku.
- Masveidā vienkāršota izstrāde: Pirms šīs API līdzīgu efektu panākšanai bija nepieciešamas smagas JavaScript bibliotēkas (piemēram, Framer Motion vai GSAP) vai sarežģīti CSS-in-JS risinājumi. View Transition API aizstāj šo sarežģītību ar vienkāršu funkcijas izsaukumu un dažām CSS rindiņām, pazeminot barjeru, lai izveidotu skaistu, lietotnei līdzīgu pieredzi.
- Izcila veiktspēja: Pārlūkprogrammas renderēšanas dzinējam nododot animācijas loģiku, skatu pārejas var būt veiktspējīgākas un akumulatora ziņā efektīvākas nekā to JavaScript vadītie kolēģi. Pārlūkprogramma var optimizēt procesu veidos, kurus ir grūti atkārtot manuāli.
- SPA-MPA plaisas pārvarēšana: Iespējams, visinteresantākais aspekts ir tā atbalsts starpdokumentu pārejām. Tas ļauj tradicionālām, serverī renderētām vietnēm (MPA) izmantot plūstošu navigāciju, kas ilgu laiku tika uzskatīta par ekskluzīvu SPA. Uzņēmumi tagad var uzlabot savas esošās vietnes ar moderniem UX modeļiem, neveicot dārgu un sarežģītu arhitektūras migrāciju uz pilnu SPA ietvaru.
Pamatjēdzieni: Izpratne par View Transitions maģiju
Lai apgūtu API, vispirms ir jāsaprot tās divas galvenās sastāvdaļas: JavaScript aktivizētājs un CSS pseidoelementu koks, kas nodrošina pielāgošanu.
JavaScript ieejas punkts: `document.startViewTransition()`
Viss sākas ar vienu JavaScript funkciju: `document.startViewTransition()`. Šī funkcija kā argumentu pieņem atzvanīšanas funkciju. Šīs atzvanīšanas funkcijas iekšpusē jūs veicat visas DOM manipulācijas, kas nepieciešamas, lai pārietu no vecā stāvokļa uz jauno.
Tipisks zvans izskatās šādi:
// Vispirms pārbaudiet, vai pārlūkprogramma atbalsta API
if (!document.startViewTransition) {
// Ja netiek atbalstīts, atjauniniet DOM tieši
updateTheDOM();
} else {
// Ja tiek atbalstīts, aptiniet DOM atjaunināšanu pārejas funkcijā
document.startViewTransition(() => {
updateTheDOM();
});
}
Kad izsaucat `startViewTransition`, pārlūkprogramma sāk agrāk aprakstīto uztveršanas-atjaunināšanas-animācijas secību. Funkcija atgriež `ViewTransition` objektu, kas satur solījumus, kas ļauj piekļūt dažādiem pārejas dzīves cikla posmiem, lai iegūtu papildu kontroli.
CSS pseidoelementu koks
Īstā pielāgošanas jauda slēpjas īpašā CSS pseidoelementu kopā, ko pārlūkprogramma izveido pārejas laikā. Šis pagaidu koks ļauj jums neatkarīgi veidot veco un jauno skatu.
::view-transition: koka sakne, kas aptver visu skata lauku. Varat to izmantot, lai iestatītu fona krāsu vai pārejas ilgumu.::view-transition-group(name): attēlo vienu pārejošu elementu. Tas ir atbildīgs par elementa pozīciju un izmēru animācijas laikā.::view-transition-image-pair(name): konteiners elementa vecajiem un jaunajiem skatiem. Tas ir veidots kā izolējošs `mix-blend-mode`.::view-transition-old(name): elementa ekrānuzņēmums tā vecajā stāvoklī (piemēram, sīktēls).::view-transition-new(name): elementa tiešais attēlojums tā jaunajā stāvoklī (piemēram, pilna izmēra attēls).
Pēc noklusējuma vienīgais elements šajā kokā ir `root`, kas attēlo visu lapu. Lai animētu noteiktus elementus starp stāvokļiem, tiem ir jāpiešķir konsekvents `view-transition-name`.
Praktiskā ieviešana: jūsu pirmā View Transition (SPA piemērs)
Veidosim izplatītu UI modeli: karšu sarakstu, kas, noklikšķinot uz tām, pāriet uz detalizētu skatu tajā pašā lapā. Galvenais ir kopīgs elements, piemēram, attēls, kas vienmērīgi pārveidojas starp abiem stāvokļiem.
1. darbība: HTML struktūra
Mums ir nepieciešams konteiners mūsu sarakstam un konteiners detalizētajam skatam. Mēs pārslēgsim klasi vecākelementam, lai parādītu vienu un paslēptu otru.
<div id="app-container">
<div class="list-view">
<!-- 1. karte -->
<div class="card" data-id="item-1">
<img src="thumbnail-1.jpg" alt="1. vienums">
<h3>Pirmais produkts</h3>
</div>
<!-- Vairāk karšu... -->
</div>
<div class="detail-view" hidden>
<img src="large-1.jpg" alt="1. vienums">
<h1>Pirmais produkts</h1>
<p>Detalizēts apraksts šeit...</p>
<button id="back-button">Atpakaļ</button>
</div>
</div>
2. darbība: piešķiriet `view-transition-name`
Lai pārlūkprogramma saprastu, ka sīktēlu attēls un detalizētā skata attēls ir *viens un tas pats konceptuālais elements*, mums jāpiešķir tiem vienāds `view-transition-name` mūsu CSS. Šim nosaukumam jābūt unikālam katram pārejošajam elementam lapā jebkurā noteiktā laikā.
.card.active img {
view-transition-name: product-image;
}
.detail-view.active img {
view-transition-name: product-image;
}
Mēs izmantojam `.active` klasi, kuru mēs pievienosim ar JavaScript, lai nodrošinātu, ka nosaukums tiek piešķirts tikai redzamajiem elementiem, izvairoties no konfliktiem.
3. darbība: JavaScript loģika
Tagad mēs uzrakstīsim funkciju, kas apstrādā DOM atjaunināšanu, un ietīsim to `document.startViewTransition()`.
function showDetailView(itemId) {
const updateDOM = () => {
// Pievienojiet klasi 'active' pareizajai kartei un detalizētajam skatam
// Tas arī piešķir view-transition-name, izmantojot CSS
document.querySelector(`.card[data-id='${itemId}']`).classList.add('active');
document.querySelector('.detail-view').classList.add('active');
// Paslēpiet sarakstu un parādiet detalizēto skatu
document.querySelector('.list-view').hidden = true;
document.querySelector('.detail-view').hidden = false;
};
if (!document.startViewTransition) {
updateDOM();
return;
}
document.startViewTransition(() => updateDOM());
}
Ar to vien pietiek, lai, noklikšķinot uz kartes, tiktu aktivizēta vienmērīga, pārveidojoša attēla animācija un pārējās lapas savstarpēja izbalēšana. Nav nepieciešama sarežģīta animācijas laika skala vai bibliotēka.
Nākamā robeža: starpdokumentu View Transitions MPA
Šeit API kļūst patiesi pārveidojoša. Šo vienmērīgo pāreju piemērošana tradicionālām daudzu lapu lietojumprogrammām (MPA) iepriekš nebija iespējama, nepārvēršot tās par SPA. Tagad tā ir vienkārša iekļaušana.
Starpdokumentu pāreju iespējošana
Lai iespējotu pārejas navigācijai starp dažādām lapām, pievienojiet vienkāršu CSS @at-rule gan avota, gan galamērķa lapu CSS:
@view-transition {
navigation: auto;
}
Tas ir viss. Kad šis noteikums ir klāt, pārlūkprogramma automātiski izmantos skata pāreju (noklusējuma savstarpēju izbalēšanu) visai vienāda izcelsmes navigācijai.
Galvenais: konsekvents `view-transition-name`
Tāpat kā SPA piemērā, elementu savienošanas maģija divās atsevišķās lapās ir atkarīga no koplietota, unikāla `view-transition-name`. Iedomāsimies produktu saraksta lapu (`/products`) un produkta detalizētas informācijas lapu (`/products/item-1`).
Vietnē `products.html`:
<a href="/products/item-1">
<img src="thumbnail-1.jpg" style="view-transition-name: product-image-1;">
</a>
Vietnē `product-detail.html`:
<div class="hero">
<img src="large-1.jpg" style="view-transition-name: product-image-1;">
</div>
Kad lietotājs noklikšķina uz saites pirmajā lapā, pārlūkprogramma redz elementu ar `view-transition-name: product-image-1`, kas atstāj lapu. Pēc tam tā gaida, kamēr tiek ielādēta jaunā lapa. Kad otrā lapa tiek renderēta, tā atrod elementu ar tādu pašu `view-transition-name` un automātiski izveido vienmērīgu pārveidojošu animāciju starp abiem. Pārējais lapas saturs pēc noklusējuma ir smalka savstarpēja izbalēšana. Tas rada ātruma un nepārtrauktības uztveri, kas iepriekš bija neiedomājams MPA.
Papildu paņēmieni un pielāgojumi
Noklusējuma savstarpēja izbalēšana ir eleganta, taču API nodrošina dziļas pielāgošanas āķus, izmantojot CSS animācijas.
Animāciju pielāgošana ar CSS
Varat ignorēt noklusējuma animācijas, atlasot pseidoelementus ar standarta CSS `@keyframes` un `animation` rekvizītiem.
Piemēram, lai izveidotu efektu "iebīdīšana no labās puses" jaunajam lapas saturam:
@keyframes slide-from-right {
from { transform: translateX(100%); }
}
::view-transition-new(root) {
animation: slide-from-right 0.5s ease-out;
}
Varat piemērot atšķirīgas animācijas `::view-transition-old` un `::view-transition-new` dažādiem elementiem, lai izveidotu ļoti horeogrāfiskas un sarežģītas pārejas.
Pārejas veidu kontrole ar klasēm
Bieži nepieciešams, lai dažādas animācijas būtu paredzētas navigācijai uz priekšu un atpakaļ. Piemēram, navigācija uz priekšu var iebīdīt jauno lapu no labās puses, savukārt atpakaļ navigācija to iebīda no kreisās puses. To var panākt, pievienojot klasi dokumenta elementam (`<html>`) tieši pirms pārejas aktivizēšanas.
JavaScript pogai "atpakaļ":
backButton.addEventListener('click', (event) => {
event.preventDefault();
document.documentElement.classList.add('is-going-back');
document.startViewTransition(() => {
// Loģika, lai pārietu atpakaļ
Promise.resolve().then(() => {
document.documentElement.classList.remove('is-going-back');
});
});
});
CSS, lai definētu dažādas animācijas:
/* Noklusējuma animācija uz priekšu */
::view-transition-new(root) {
animation: slide-from-right 0.5s;
}
/* Animācija atpakaļ */
.is-going-back::view-transition-new(root) {
animation: slide-from-left 0.5s;
}
Šis jaudīgais modelis nodrošina detalizētu kontroli pār lietotāja navigācijas pieredzi.
Piekļūstamības apsvērumi
Mūsdienīgam tīmekļa API būtu jābūt nepilnīgam bez iebūvētas piekļūstamības, un View Transition API to nodrošina.- Lietotāju preferenču ievērošana: API automātiski ievēro `prefers-reduced-motion` multivides vaicājumu. Ja lietotājs ir norādījis, ka vēlas mazāk kustību savos operētājsistēmas iestatījumos, pāreja tiek izlaista un DOM atjaunināšana notiek uzreiz. Tas notiek pēc noklusējuma bez papildu darba no izstrādātāja.
- Fokusa saglabāšana: Pārejas ir tikai vizuālas. Tās netraucē standarta fokusa pārvaldībai. Izstrādātāja pienākums ir nodrošināt, lai pēc pārejas tastatūras fokuss tiktu pārvietots uz loģisku elementu jaunajā skatā, piemēram, galveno virsrakstu vai pirmo interaktīvo elementu.
- Semantiska HTML: API ir uzlabojumu slānis. Jūsu pamatā esošajam HTML jābūt semantiskam un pieejamam. Lietotājs ar ekrāna lasītāju vai pārlūkprogrammu, kas neatbalsta API, pieredzēs saturu bez pārejas, tāpēc struktūrai jābūt jēgpilnai pašai par sevi.
Pārlūkprogrammas atbalsts un progresīvs uzlabojums
2023. gada beigās View Transition API SPA atbalsta pārlūkprogrammas, kuru pamatā ir Chromium (Chrome, Edge, Opera). Starpdokumentu pārejas MPA ir pieejamas aiz līdzekļa karodziņa un tiek aktīvi izstrādātas.
API tika izstrādāta no paša sākuma progresīvam uzlabojumam. Iepriekš izmantotais aizsardzības modelis ir galvenais:
if (!document.startViewTransition) { ... }
Šī vienkāršā pārbaude nodrošina, ka jūsu kods mēģina izveidot pāreju tikai pārlūkprogrammās, kas to atbalsta. Vecākās pārlūkprogrammās DOM atjaunināšana notiek uzreiz, kā tas vienmēr ir bijis. Tas nozīmē, ka varat sākt izmantot API jau šodien, lai uzlabotu pieredzi lietotājiem modernās pārlūkprogrammās, bez negatīvas ietekmes uz tiem, kuriem ir vecākas pārlūkprogrammas. Tas ir abpusēji izdevīgs scenārijs.
Tīmekļa navigācijas nākotne
View Transition API ir vairāk nekā tikai rīks uzmanību piesaistošu animāciju veidošanai. Tas ir būtisks pavērsiens, kas ļauj izstrādātājiem veidot intuitīvākus, saskaņotākus un saistošākus lietotāju ceļojumus. Standartizējot lapu pārejas, tīmekļa platforma novērš atšķirības ar vietējām lietojumprogrammām, nodrošinot jaunu kvalitātes un gluduma līmeni visu veidu vietnēm.
Paplašinoties pārlūkprogrammu atbalstam, mēs varam sagaidīt jaunu radošuma vilni tīmekļa dizainā, kur ceļojums starp lapām kļūst tikpat pārdomāti izstrādāts kā pašas lapas. Līnijas starp SPA un MPA turpinās izplūst, ļaujot komandām izvēlēties labāko arhitektūru savam projektam, nezaudējot lietotāja pieredzi.
Secinājums: sāciet veidot vienmērīgāku pieredzi jau šodien
CSS View Transition API piedāvā retu jaudīgu iespēju un ievērojamas vienkāršības kombināciju. Tas nodrošina efektīvu, pieejamu un progresīvi uzlabotu veidu, kā paaugstināt jūsu vietnes lietotāja pieredzi no funkcionālas uz patīkamu.
Neatkarīgi no tā, vai veidojat sarežģītu SPA vai tradicionālu serverī renderētu vietni, rīki tagad ir pieejami, lai novērstu nepatīkamu lapu ielādi un vadītu lietotājus caur saskarni ar plūstošām, jēgpilnām animācijām. Labākais veids, kā saprast tā jaudu, ir to izmēģināt. Paņemiet nelielu daļu no savas lietojumprogrammas – galeriju, iestatījumu lapu vai produktu plūsmu – un eksperimentējiet. Jūs būsiet pārsteigts, kā dažas koda rindiņas var būtiski mainīt jūsu vietnes sajūtu.
Baltā zibšņa ēra tuvojas beigām. Tīmekļa navigācijas nākotne ir vienmērīga, un ar View Transition API jums ir viss nepieciešamais, lai sāktu to veidot jau šodien.